import {history} from "umi";
import {IndexBar, List, NavBar, SearchBar, Tabs, Selector} from "antd-mobile";
import {LoremIpsum} from "lorem-ipsum";

export const lorem = new LoremIpsum({
    sentencesPerParagraph: {
        max: 8,
        min: 4,
    },
    wordsPerSentence: {
        max: 16,
        min: 4,
    },
})

const CityPage = () => {
    const back = () => {
        history.replace("/")
    }

    const getRandomList = (min: number, max: number): string[] => {
        return new Array(Math.floor(Math.random() * (max - min) + min)).fill('')
    }

    const charCodeOfA = 'A'.charCodeAt(0)
    const groups = Array(26)
        .fill('')
        .map((_, i) => ({
            title: String.fromCharCode(charCodeOfA + i),
            items: getRandomList(3, 10).map(() => lorem.generateWords(2)),
        }))

    const options = [
        {
            label: '选项一',
            value: '1',
        },
        {
            label: '选项二',
            value: '2',
        },
        {
            label: '选项三',
            value: '3',
        },
    ]
    return (
        <div >
            <NavBar onBack={back}>出差</NavBar>
            <div style={{
                paddingTop: 4,
                paddingBottom: 4,
                paddingLeft: 8,
                paddingRight: 8,
                backgroundColor: "#4F9EFB",
                borderRadius: '6px'
            }}>
                <SearchBar placeholder='请输入内容' showCancelButton/>
            </div>

            <Tabs>
                <Tabs.Tab title='国内' key='in'>
                    <div style={{ paddingBottom: 14, background:"#FCFCFC" }}>
                        <h4 style={{color:"grey"}}>热门城市</h4>
                        <Selector
                            columns={3}
                            options={options}
                            showCheckMark={false}
                            onChange={()=>{console.log(1)}}
                            style={{
                                '--color': '#E8F2FF',
                                '--border': 'solid transparent 1px',
                                '--checked-border': 'solid var(--adm-color-primary) 1px',
                                '--padding': '4px 12px',
                            }}
                            // defaultValue={['2', '3']}
                        />
                    </div>
                    <div style={{height: window.innerHeight}}>
                        <IndexBar>
                            {groups.map(group => {
                                const {title, items} = group
                                return (
                                    <IndexBar.Panel
                                        index={title}
                                        title={`标题${title}`}
                                        key={`标题${title}`}
                                    >
                                        <List>
                                            {items.map((item, index) => (
                                                <List.Item key={index}>{item}</List.Item>
                                            ))}
                                        </List>
                                    </IndexBar.Panel>
                                )
                            })}
                        </IndexBar>
                    </div>
                </Tabs.Tab>
                <Tabs.Tab title='国外' key='out'>
                    西红柿
                </Tabs.Tab>
            </Tabs>
        </div>
    )
};

export default CityPage;
